<template>
  <!-- 在共享市场  共享订单 明细  -->
  <el-dialog title="号码明细" :visible.sync="dialogVisible" append-to-body @close="close" :close-on-click-modal="false" width="660px" class="customTab customTabNew">

   
    <div class="table_box customTab table_box_new" v-loading="loading">
      <el-descriptions border  title="" :column="2" >
        <el-descriptions-item label="共享单号" >{{ orderInfo.no }}</el-descriptions-item>
        <el-descriptions-item label="订单类型">
          <el-tag type="success" v-if="orderInfo.orderType==1">新购</el-tag>
            <el-tag type="danger" v-if="orderInfo.orderType==2">续费</el-tag>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="运营商">{{ orderInfo.carrierName }}</el-descriptions-item> -->
       
      </el-descriptions>
      <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" class="zdy-form search-form-new" label-width="90px">
        <el-form-item label="管理方名称" prop="chuzufangName">
          <el-input v-model="queryParams.chuzufangName" placeholder="请输入管理方名称" clearable />
        </el-form-item>
        <el-form-item label="使用方名称" prop="zulinfangName">
          <el-input v-model="queryParams.zulinfangName" placeholder="请输入使用方名称" clearable />
        </el-form-item>
        <el-form-item label="运营商" prop="carrierId">
          <el-select v-model="queryParams.carrierId" placeholder="请选择运营商" clearable>
            <el-option v-for="dict in carrierTypes" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="共享单号" prop="no" label-width="70px">
          <el-input style="width: 200px;" v-model="queryParams.no" placeholder="请输入共享单号" clearable />
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button type="warning" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> -->
      <el-table border stripe :data="tableData.records">
        <!-- <el-table-column label="共享单号" prop="no" width="200" />
        <el-table-column label="订单类型" prop="no">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.orderType==1">新购</el-tag>
            <el-tag type="danger" v-if="scope.row.orderType==2">续费</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="管理方" prop="chuzufangName" />
        <el-table-column label="使用方" prop="zulinfangName" /> -->
        <el-table-column label="运营商" prop="carrierName" />
        <el-table-column label="手机号" prop="tel" />
        <!-- <el-table-column label="时间" prop="createTime" width="160" /> -->
        <!-- <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.orderType==1" @click="xufei(scope.row)" type="text">续费</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="pages-box">
      <pagination v-show="tableData.total>0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <addShiyong ref="addShiyong" @saved="search"></addShiyong>
  </el-dialog>
</template>
<script>
import phoneApi from "@/api/phoneManage";
import addShiyong from "./addShiyong.vue";
export default {
  name: "",
  components: { addShiyong },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      tableData: {
        records: [],
        total: 0,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        telShareOrderId:''
      },
      orderInfo:null

    };
  },
  created() {},
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    carrierTypes() {
      return this.$store.getters.gameYunyingshangList;
    },
  },
  methods: {
    // 打开弹窗
    open(option) {
      this.dialogVisible = true;
      if (option) {
        this.orderInfo = {...option}
        this.queryParams.telShareOrderId = option.id;
      }
      this.getList();
    },
    // xufei(row) {
    //   this.$refs.addShiyong.open("xufei", row);
    // },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置搜索
    resetQuery() {
      const telShareOrderId = this.queryParams.telShareOrderId;
      this.resetForm("queryForm");
      this.queryParams.telShareOrderId = telShareOrderId;
      this.search();
    },
    // 查询订单列表
    getList() {
      this.loading = true;
      this.tableData.records = [];
      phoneApi.telShareInfolist(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.tableData.total = res.total;
      });
    },
    // tabs切换时触发
    tabChange(e) {
      this.queryParams.dataType = e;
      this.resetQuery();
    },

    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.tabs {
  margin-bottom: 10px;
}
</style>
